<template>
  <div class="all-rel">
    <div class="all-flex-center-between all-top-handle">
      <el-button size="small" @click="clearFilter">重置所有筛选</el-button>
      <el-button size="small" type="primary" round @click="checkCode">核销</el-button>
    </div>
    <div class="all-flow-table-box">
      <el-table ref="myTable" :data="list" border stripe @expand-change="expandChange">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-table :data="codeList" border size="small" :row-style="{'background': '#fffef5'}">
              <el-table-column align="center" type="index" width="50"></el-table-column>
              <el-table-column align="center" prop="verificationCode" label="核销码" width="180"></el-table-column>
              <el-table-column align="center" prop="status" label="核销状态" width="100"
                :filters="[{text: '已核销', value: 1}, {text: '待核销', value: 0}]"
                :filter-method="filterHandler"
              >
                <template slot-scope="scope">
                  <span v-if="scope.row.status === 0">待核销</span>
                  <span v-else-if="scope.row.status === 1">已核销</span>
                </template>
              </el-table-column>
              <el-table-column></el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column sortable align="center" prop="orderID" label="订单ID" width="100"></el-table-column>
        <el-table-column align="center" prop="productinfo.productName" label="产品名称" width="180"></el-table-column>
        <el-table-column align="center" prop="user.nickname" label="付款用户名称" width="120"></el-table-column>
        <el-table-column sortable align="center" prop="count" label="购买数量" width="120"></el-table-column>
        <el-table-column sortable align="center" prop="money" label="支付金额" width="120"></el-table-column>
        <el-table-column align="center" prop="order_type" label="支付类型" width="100"
          :filters="[{text: '微信支付', value: '微信支付'}, {text: '支付宝支付', value: '支付宝支付'}]"
          :filter-method="filterHandler"
        ></el-table-column>
        <!--支付失败-2, 待支付-1, 待核销(已支付)1, 已退款2, 已完成3-->
        <el-table-column align="center" prop="status" label="订单状态" width="100"
          :filters="[{text: '支付失败', value: -2}, {text: '待支付', value: -1}, {text: '待核销', value: 1}, {text: '已退款', value: 2}, {text: '已完成', value: 3}]"
          :filter-method="filterHandler"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.status === -2">支付失败</span>
            <span v-else-if="scope.row.status === -1">待支付</span>
            <span v-else-if="scope.row.status === 1">待核销</span>
            <span v-else-if="scope.row.status === 2">已退款</span>
            <span v-else-if="scope.row.status === 3">已完成</span>
          </template>
        </el-table-column>
        <el-table-column sortable align="center" prop="addTime" label="订单添加时间" width="150"></el-table-column>
        <el-table-column sortable align="center" prop="paytime" label="订单支付时间" width="150"></el-table-column>
        <el-table-column align="center" prop="tradeNo" label="交易订单号"></el-table-column>
        <el-table-column align="center" label="操作" width="100">
          <template slot-scope="scope">
            <el-button size="mini" @click="lookCheckList(scope.row)">核销列表</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="all-pagination">
      <el-pagination background layout="prev, pager, next" :page-size="size" :total="count" @current-change="currentPage"></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
      size: 10,
      list: [],
      codeList: [],
      masterID: ''
    };
  },
  methods: {
    clearFilter() {
      this.$refs.myTable.clearFilter();
    },
    filterHandler(value, row, column) {
      const property = column['property'];
      return row[property] === value;
    },
    getList(page, size) {
      let _this = this;
      this.$ajax({
        url:'order/getlist',
        data:{
          app:{
            masterID: this.masterID,
            page: page,
            size: size === undefined ? this.size : size,
          }
        },
        perfect(con) {
          _this.list = con.list;
          _this.count = con.count;
        },
        success(res) {
          if (res.data.code !== 1) {
            _this.$message({
              message: res.data.msg,
              type: 'warning'
            });
          }
        }
      });
    },
    currentPage(page) {
      this.getList(page);
    },
    //核销操作
    checkCode() {
      let _this = this;
      this.$prompt('请输入核销码', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /^[A-Za-z\d]+$/,
        inputErrorMessage: '核销码格式不正确'
      }).then(({ value }) => {
        _this.$ajax({
          url: 'order/verification',
          data: {
            app: {
              verificationCode: value
            }
          },
          success(res) {
            if (res.data.code === 1) {
              _this.$message({
                message: res.data.msg,
                type: 'success'
              });
            } else {
              _this.$message({
                message: res.data.msg,
                type: 'warning'
              });
            }
          }
        });
      }).catch(() => {});
    },
    lookCheckList(row) {
      this.$refs.myTable.toggleRowExpansion(row);
    },
    expandChange(row) {
      const _this = this;
      this.$ajax({
        url: 'order/getOrderDetail',
        data: {
          app: {
            orderID: row.orderID
          }
        },
        perfect(con) {
          _this.codeList = con;
        }
      });
    }
  },
  created(){
    this.masterID = this.$store.state.user.userId;
    this.getList(1);
  }
};
</script>
